<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>彩妆</title>
		<style>
			.make {
				width: 100%;
				height:600px;
			}
      </style>
      <script src="js/angular.js"></script>
      <script src="js/205.js"></script>
	</head>
	<body ng-app="aboutApp"  ng-controller="aboutCon">
		<div class="make" align="center">
			<div class="container" style="background-color: darkseagreen;">
				<div class="row">
					<div class="col-lg-12 col-md-12 col-sm-12">
						<h4>订单详情</h4>
						<div ng-controller="aboutCon" style="margin-left:0px;font-size:15px;">
							<!--状态设置类指令：ng-show -->
							编号：<input type="number" ng-model="id" ng-show="true" style="width: 50px;"> 姓名：
							<!--状态设置类指令:ng-readonly-->
							<!--状态设置类指令ng-hide-->
							<input type="text" ng-readonly="true" ng-model="name" ng-hide="false" style="width: 50px;"> 类别：
							<select ng-model="grade" style="width:40px;">
								<option value="冷饮系列">冷饮系列</option>
								<option value="热门小吃">热门小吃</option>
								<option value="热门电影">热门电影</option>
								<option value="最多点击">最多点击</option>
								<option value="独家系列">独家系列</option>
							</select><br/><span style="margin-left:-160px;display: block;color: crimson;">价格</span>
							<!--状态设置类指令:ng-disabled-->
							<input type="number" ng-disabled="false" ng-model="score" style="width: 50px;font-size: 10px;margin-left:-60px ;">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ng-click="add(id,name,grade,score)" >添加</button><br><br> 系列查询:
							<select ng-model="grade2">
								<option value="a">全部系列</option>
								<option value="183">冷饮系列</option>
								<option value="184">热门电影</option>
								<option value="188">热门小吃</option>
								<option value="1811">最多点击</option>
								<option value="1812">热门快餐</option>
								<option value="no">独家系列</option>
							</select><br>
							<div ng-switch="grade2" style="margin-left:0px;font-size:15px;">
								<!--流程设置类指令：ng-switch  ng-repeat-->
								<div ng-switch-default>
									<table border="1" style="border-collapse:collapse">
										<tr>
											<th>排名</th>
											<th>订单号</th>
											<th>姓名</th>
											<th>种类</th>
											<th>价格</th>
											<th>删除</th>
										</tr>
										<tr ng-repeat="item in all | orderBy:'id'" ng-class="[$odd?'o':'']">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<!--事件绑定类：ng-click-->
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
								<div ng-switch-when="183" style="margin-left:0px;font-size:15px;">
									<table border="1" style="border-collapse: collapse;width: 100%;">
										<tr>
											<th>排名</th>
											<th>订单号</th>
											<th>姓名</th>
											<th>种类</th>
											<th>价格</th>
											<th>删除</th>
										</tr>
										<!--过滤器：系列中含有彩妆的所有数据--
                                        -->
										<tr ng-repeat="item in all | filter:{grade:'冷饮'}" ng-class-odd="'o'">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
								
								<div ng-switch-when="184" style="margin-left:0px;font-size:15px;">
									<table border="1" style="border-collapse:collapse; width: 100%;">
										<tr>
											<th>排名</th>
											<th>订单号</th>
											<th>姓名</th>
											<th>种类</th>
											<th>价格</th>
											<th>删除</th>
										</tr>
										<tr ng-repeat="item in list4" ng-class-even="'o'">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
								
								<div ng-switch-when="188" style="margin-left:0px;font-size:15px;">
									<table border="1" style="border-collapse: collapse;">
										<tr>
											<th>排名</th>
											<th>订单号</th>
											<th>姓名</th>
											<th>种类</th>
											<th>价格</th>
											<th>删除</th>
										</tr>
										<tr ng-repeat="item in list8" ng-class="{a:true}">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
							
								<div ng-switch-when="1811" style="margin-left:0px;font-size:15px;">
									<table border="1" style="border-collapse: collapse;">
										<tr>
											<th>排名</th>
											<th>订单号</th>
											<th>姓名</th>
											<th>种类</th>
											<th>价格</th>
											<th>删除</th>
										</tr>
										<tr ng-repeat="item in list11" ng-style="{'background-color':'white'}">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
								
								<div ng-switch-when="1812">
									<table border="1" style="border-collapse: collapse;">
										<tr>
											<th>排名</th>
											<th>订单号</th>
											<th>姓名</th>
											<th>种类</th>
											<th>价格</th>
											<th>删除</th>
										</tr>
										<tr ng-repeat="item in list12">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
								
								<div ng-switch-when="no">
									<table border="1" style="border-collapse: collapse;width: 100%;">
										<tr>
											<th>排名</th>
											<th>编号</th>
											<th>姓名</th>
											<th>类别</th>
											<th>价格</th>
											<th>操作</th>
										</tr>
										<tr ng-repeat="item in all | filter:scoreno" ng-calss="'red'">
											<!--索引-->
											<td>{{$index+1}}</td>
											<td>{{item.id}}</td>
											<td>{{item.name}}</td>
											<td>{{item.grade}}</td>
											<td>{{item.score}}</td>
											<td><button ng-click="del(item.id)">删除</button></td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
